<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <p class="p"><van-icon name="user-circle-o" class="icc" /></p>

    <van-form class="form" @submit="onSubmit">
      <van-field
        v-model="log.phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
        style="
          width: 300px;
          height: 40px;
          border-radius: 40px;
          margin-bottom: 10px;
        "
      />
      <van-field
        v-model="log.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        style="
          width: 300px;
          height: 40px;
          border-radius: 40px;
          margin-bottom: 10px;
        "
      />
      <div class="denglu" style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="width: 100px"
          >登录</van-button
        >
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="width: 100px"
          :to="{ name: 'Reg' }"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loginAPI } from "../services/Login";
export default {
  data() {
    return {
      log: {
        phone: "",
        password: "",
      },
    };
  },
  created() {},
  methods: {
    async onSubmit(values) {
      const res = await loginAPI(values);
      console.log(values);
      if (res.loginType === 1) {
        Toast.success({
          message: "登录成功",
        });

        this.$router.push({
          name: "Home",
        });
        localStorage.setItem("id", res.account.id);
      } else {
        Toast.fail({
          message: res.msg,
        });
      }
    },

    onClickLeft() {
      this.$router.push({
        name: "Jump",
      });
    },
  },
};
</script>

<style scoped>
body,
html,
.login {
  width: 100vw;
  background-color: rgb(61, 206, 238);
}
.p {
  text-align: center;
  margin: 80px;
}
.icc {
  color: white;
  font-size: 120px;
  margin: 0 auto;
}
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.denglu {
  display: flex;
  justify-content: space-around;
}
</style>
